<template>
  <div class="wrap-container">
    <CommonTreeMain
      ref="leftTreeRef"
      :query-form="treeQueryForm"
      :url="option.treeConfig.treeUrl"
      @handle-node-click="onNodeClick"
    >
      <template #main>
        <vab-query-form>
          <vab-query-form-top-panel :span="16">
            <el-button
              v-show="!option.treeConfig.isShow"
              v-permissions="{ permission: ['add:OrgList'] }"
              :icon="Plus"
              type="primary"
              @click="onAdd"
            >
              添加
            </el-button>
            <el-button
              v-show="!option.treeConfig.isShow"
              v-permissions="{ permission: ['update:OrgList'] }"
              :icon="Edit"
              type="primary"
              @click="onEdit()"
            >
              修改
            </el-button>
            <el-button v-show="option.treeConfig.isShow" type="primary" @click="onSave"> 保存 </el-button>
            <el-button v-show="option.treeConfig.isShow" @click="onCancel"> 取消 </el-button>
            <el-button
              v-show="!option.treeConfig.isShow"
              v-permissions="{ permission: ['del:OrgList'] }"
              :icon="Delete"
              type="danger"
              @click="onDelete"
            >
              删除
            </el-button>

            <UploadDialog
              :accept="'.xls,.xlsx'"
              :limit="3"
              :size="5242880"
              templatefilename="科室档案导入模板.xlsx"
              :url="'system/org/importFile'"
              @callbackupload="onHandleUpload"
            >
              <template #uploadLink>
                <el-button :icon="Upload" style="margin-left: 12px" type="primary"> 导入 </el-button>
              </template>
            </UploadDialog>
            <ExportDirect
              v-show="!option.treeConfig.isShow"
              expfilename="科室档案导出模板"
              :params="exportParams"
              url="system/org"
            >
              <template #downloadLink>
                <el-button :icon="Download" style="margin-left: 12px" type="primary"> 导出 </el-button>
              </template>
            </ExportDirect>
          </vab-query-form-top-panel>
        </vab-query-form>
        <CommonForm
          ref="formRef"
          v-model="form"
          v-loading="option.treeConfig.isMainLoading"
          :layout-config="option.layoutConfig"
          :option="option"
          @on-extend-validate="onHandleExtendValidate"
          @on-submit="onhandleSubmit"
          @on-success="onHandleSucess"
        />
      </template>
    </CommonTreeMain>
  </div>
</template>

<script setup lang="tsx" name="OrgList">
import { Plus, Delete, Edit, Download, Upload } from "@element-plus/icons-vue";
import UploadDialog from "@/plugins/upload/UploadDialog.vue";
import ExportDirect from "@/plugins/export/ExportDirect.vue";
import CommonTreeMain from "@/plugins/tree/CommonTreeMain.vue";
import { TableColumnOrFormTypeEnum } from "@/plugins/commonType.enum";
import {
  handleAdd,
  handleEdit,
  handleDelete,
  handleCancel,
  handleSave,
  handleNodeClick,
  handleRefreshTree
} from "@/plugins/tree/CommonTreeMainTs";
import CommonForm from "@/plugins/form/CommonForm.vue";

const formRef = ref();
const leftTreeRef = ref();
const treeQueryForm = ref({ EQ_ss: "1", pageSize: -1, sorts: "cts@asc" });
const exportParams = ref({ EQ_ss: "1" });

const onAdd = () => {
  handleAdd(option, formRef, form);
};
const onDelete = () => {
  handleDelete(option, form, leftTreeRef);
};
const onEdit = () => {
  handleEdit(option, form);
};

const onSave = () => {
  formRef.value.onhandleSubmit();
};

const onCancel = async () => {
  handleCancel(option, formRef, form);
};

const onNodeClick = (treeNodeId: string) => {
  handleNodeClick(option, treeNodeId, form);
};

const option = ref();
const form = ref({
  id: "",
  parentid: "",
  parentname: "",
  nodecode: "",
  nodename: "",
  memo: ""
});
option.value = {
  treeConfig: {
    treeUrl: "system/org/query", //左边树请求url
    entityUrl: "system/org", //操作实体请求url
    isShow: false,
    disabled: true,
    editable: false,
    labelPosition: "right",
    id: "", //树节点的id
    parentid: "", //父节点id
    isMainLoading: false
  },
  layoutConfig: {
    column: 2,
    columnGap: "35px"
  },
  column: [
    {
      label: "上级节点",
      prop: "parentname",
      type: TableColumnOrFormTypeEnum.INPUT,
      disabled: true,
      placeholder: "请选择上级",
      expand: 1
    },
    {},
    {
      label: "机构编码",
      prop: "nodecode",
      type: TableColumnOrFormTypeEnum.INPUT,
      placeholder: "请输入机构编码",
      expand: 2
    },
    {
      label: "机构名称",
      prop: "nodename",
      type: TableColumnOrFormTypeEnum.INPUT,
      placeholder: "请输入机构名称",
      expand: 2
    },
    {
      label: "机构类别",
      prop: "type",
      type: TableColumnOrFormTypeEnum.SELECT,
      dictCode: "OrgType",
      placeholder: "请选择机构类别",
      expand: 2
    },
    {
      label: "显示顺序",
      prop: "showorder",
      type: TableColumnOrFormTypeEnum.INPUTNUMBER,
      placeholder: "请输入显示顺序",
      precision: 0,
      expand: 2,
      min: 1,
      max: 999
    },
    {
      label: "备注",
      prop: "memo",
      type: TableColumnOrFormTypeEnum.TEXTAREA,
      placeholder: "请输入备注",
      expand: 2
    }
  ],
  formConfig: {
    title: "",
    labelPosition: "right",
    labelWidth: "120px",
    isInModal: true,
    disabled: true
  },
  btnsConfig: {
    save: {
      isShow: false
    },
    back: {
      isShow: false
    }
  },
  rules: {
    parentid: [{ required: true, trigger: "blur", message: "请输入上级分类" }],
    nodecode: [
      {
        required: true,
        trigger: "blur",
        message: "请输入机构编码"
      },
      {
        min: 1,
        max: 50,
        message: "输入长度 1 至 50",
        trigger: "blur"
      }
    ],
    nodename: [
      {
        required: true,
        trigger: "blur",
        message: "请输入机构名称"
      },
      {
        min: 1,
        max: 50,
        message: "输入长度 1 至 50",
        trigger: "blur"
      }
    ],
    type: [{ required: true, trigger: "blur", message: "请选择机构类别" }],
    showorder: [{ required: true, trigger: "blur", message: "请输入显示顺序" }],
    memo: [
      {
        max: 200,
        message: "输入长度 1 至 200",
        trigger: "blur"
      }
    ]
  }
};

const onHandleExtendValidate = () => {
  option.value.isValidatePass = true;
};
const onhandleSubmit = () => {
  //没有传url，则自己提交
  handleSave(option, formRef, form, leftTreeRef);
};

const onHandleSucess = () => {
  //数据提交成功，抛出事件
  console.warn("sucess");
};

const onHandleUpload = () => {
  handleRefreshTree(option, leftTreeRef);
};
</script>

<style lang="scss" scoped>
.wrap-container {
  position: relative;
  padding: 0 !important;

  // background: $base-color-background !important;
}
</style>
